<template>
	<view class="login">
		<view class="autoLogin" v-if="isphoneLogin">
			<text class="title">康复者联盟</text>
			<button class='autoLoginBtn' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button>
			<!-- <view class="phoneLogin" @click="isphoneLogin = false">账号密码登录</view> -->
			<van-checkbox :value="checked" shape="square" checked-color="#02BF88" @change="onChange">
				<text @click.stop="protocols">用户协议</text>
			</van-checkbox>
		</view>
		<!-- <view class="accPasLogin" v-else>
			<view class="title">欢迎使用康复者联盟</view>
			<van-cell-group>
			   <van-field
				  clearable
				  maxlength='11'
				  placeholder="请输入账号"
				  @input="setInputValue('username', $event)"
				>
			  </van-field>
			  <van-field
				type='number'
			    clearable
			    placeholder="请输入密码"
			    use-button-slot
					:password="true"
					@input="setInputValue('password', $event)"
			  >
			  </van-field>
			</van-cell-group>
			<view class="passLogin" @click="submitForm">立即登录</view>
			<view class="phoneLogin" @click="isphoneLogin = true">一键登录</view>
		</view> -->
		<van-dialog
		  use-slot
		  title="康复者联盟小程序用户协议"
		  :show="isDialogShow"
			confirm-button-color="#02BF88"
		  @confirm="isDialogShow = false"
		>
			<protocol></protocol>
		</van-dialog>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
	import { quickLogin, weChatInfo } from '@/api/common'
	import configIndex from "@/config/index";
	import { formValidation } from '@/utils/regexp'
	import protocol from './protocol.vue'
	export default {
		name: 'login',
		components: { protocol },
		data() {
			return {
				checked: false,
				isphoneLogin: true,
				show: true,
				timer: null,
				count: '',
				dataValue: {},
				rules:{
					username:[
						{ required: true, message:'请填写账号' }
					],
					password:[
						{ required: true, message:'请填写密码' }
					]
				},
				isDialogShow: false
			}
		},
		onShow() {
			getApp().login()
		},
		onLoad() {
			this.$toast.loading('加载中')
		},
		methods: {
			protocols() {
				this.isDialogShow = true
			},
			//一键登录
			getPhoneNumber(e) {
				let encrypted = e.detail.encryptedData;
				let iv = e.detail.iv;
				if (!encrypted && !iv) {
					this.$toast.fail('获取绑定手机号失败,请用账号密码登录!');
				} else {
					if (!this.checked) {
						return this.$toast.fail('请勾选用户协议')
					}
					let params = {
						encryptedData: encrypted,
						iv: iv,
						sk: this.$storage.getItem('sk')
					}
					uni.showModal({
						title: '获取你的昵称、头像、地区及性别',
						success: (success) => {
							if (success.confirm == true) {
								wx.getUserProfile({
									//授权成功的回调
									desc: '获取你的昵称、头像、地区及性别',
									success:(ress) => {
										this.login(params,ress.userInfo)
									},
									fail() {
										uni.showToast({
											title: '请点击授权进行登录',
											icon: 'none'
										});
									}
								});
							}
						}
					})
				}
			},
			login(params,data){
				quickLogin(params).then(res => {
					if (res.status == 1) {
						this.$storage.setItem('accessToken', res.token);
					} else {
						this.$storage.setItem('sk', res.sk);
					}
					if (res.userInfo) {
						this.$storage.setItem('userInfo', res.userInfo);
						this.upLoad(res.token, data, res.userInfo.user.mobile)
					}
				})
			},
			upLoad(token,val,mobile) {
				uni.getImageInfo({
					src: val.avatarUrl,
					success: res => {
						uni.uploadFile({
							url: configIndex.baseURL + '/file/uploadImage',
							filePath: res.path,
							name: 'file',
							 header: {
								"Authentication": token
							},
							success: resc => {
								let file = JSON.parse(resc.data).file;
								this.weChatInfo(file, val.nickName, mobile);
							},
							fail:error => {
								console.error(error,'error')
							}
						})
					},
					fail(error) {
						console.log(error)
					}
				})
			},
			weChatInfo(file, name, phone) {
				let params = {
					headPortrait: file.fileId,
					name:name,
					phone: phone
				}
				weChatInfo(params).then(res => {
					this.$toast.success('登录成功')
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					uni.switchTab({
						url: '/pages/tabbar/index/index'
					});
				})
			},
			// 账号密码登录
			setInputValue(e,s){
				this.dataValue[e] = s.detail;
			},
			submitForm(){
				formValidation({
					data: this.dataValue,
					rules: this.rules
				}).then(res=>{
					console.log('可以登录了')
				})
			},
			// 复选框
			onChange(event) {
				this.checked = event.detail
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		min-height: 100vh;
		.autoLogin {
			width: 100%;
			box-sizing: border-box;
			padding: 300rpx 100rpx;
			text-align: center;
			.title {
				color: #000;
				font-size: 40rpx;
				font-weight: 600;
			}
			.autoLoginBtn {
				background-color: #A5AEB5;
				color: #FFFFFF;
				margin-top: 40rpx;
				margin-bottom: 34rpx;
				user-select: none;
				&:active{
					background-color: #352e2e;
				}
			}
			.phoneLogin {
				font-size: 28rpx;
				margin: 16rpx 0 30rpx;
				user-select: none;
			}
			/deep/ .van-checkbox {
				justify-content: center;
				font-size: 24rpx;
			}
			/deep/ .van-checkbox__icon {
				font-size: 26rpx !important;
			}
		}
		.accPasLogin {
			width: 100%;
			box-sizing: border-box;
			padding: 100rpx 60rpx;
			.title {
				font-size: 36rpx;
				font-size: #000;
				margin-bottom: 60rpx;
			}
			.getSendCode{
				color: #333333;
				font-size: 28rpx;
				border: 1rpx solid #333;
				user-select: none;
			}
			/deep/ .van-cell:after {
				border-color: #000;
			}
			.passLogin {
				width: 70%;
				margin-left: 15%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				user-select: none;
				background-color: #A5AEB5;
				font-size: 32rpx;
				color: white;
				border-radius: 10rpx;
				overflow: hidden;
				margin-top: 50rpx;
				&:active{
					background-color: #352e2e;
				}
			}
			.phoneLogin {
				user-select: none;
				font-size: 28rpx;
				margin: 16rpx 0 0;
				text-align: center;
			}
		}
	}
</style>
